<template>
  <div class="activity-content">
    <template v-for="(item, index ) in productList">
    <router-link :to="{name: 'productDetail', params: {commodityID: item.goodsId}, query: {keyword: keyword}}" class="activity-item" :class="{'activity-item__small':itemSize}">
      <div class="sell-out" v-show="item.stock < 1">
        <img class="sell-out-img" src="../../images/sellout.png" />
      </div>
      <span class="discount-card-tejia" v-if="true">特价</span>
      <div class="preview-img">
        <img class="img" :src="prefixImg + item.image" :alt="item.goodsName" v-if="item.image"/>
        <img class="img" :src="loadImg" v-else/>
      </div>
      <div class="pro-info txt-center">
        <h3 class="pro-name ellipsis">{{item.goodsName}}</h3>
        <h4 class="pro-type">{{item.standard}}</h4>
      </div>
      <div class="price-box">
        <div class="price">
          <template v-if="isExamComputed === 1">
            <span class="now">￥{{item.pmtPrice | floatPrices}}</span><span class="old">￥{{item.price | floatPrices}}</span>
            <span class="left">剩{{item.stock > 0 ? item.stock : 0}}件</span>
          </template>
          <p class="txt-center ft-14" v-else-if="isExamComputed === 4">登录后查看价格</p>
          <p class="txt-center ft-14" v-else>审核通过可查看</p>
        </div>
        <a class="btn-buy" :class="{'cannot-buy': item.stock < 1}">立即抢购</a>
      </div>
    </router-link>
    </template>
  </div>
</template>

<script>
import {prefixImg} from '@/tool/index'
// import {getCookie} from '@/config/mUntils'
import {mapState} from 'vuex'

export default {
  name: 'ActiveProduct',
  props: {
    productList: {
      type: Array || Object
    },
    itemSize: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    prefixImg () {
      return prefixImg
    },
    isExamComputed () {
      return this.$store.getters.loginStatus
    },
    keyword () {
      return this.$route.query.keyword
    },
    ...mapState({
      nowDiscount: state => state.user.discount
    })
  },
  data () {
    return {
      loadImg: require('../../images/newload.png')
    }
  },
  methods: {
    // ...mapActions(['fetchDiscountActivity']),
    openDetail (item) {
      if (item.stock < 1) return
      this.$router.push({name: 'productDetail', params: {commodityID: item.goodsId}, query: {keyword: this.$route.query.keyword}})
    }
  },
  mounted () {
  },
  beforeRouteEnter (to, from, next) {
    // ...
    next()
  }
}
</script>

<style lang="scss" scoped>
  .activity-content{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .activity-item{
        position: relative;
        width: 230px;
        margin-bottom: 10px;
        padding: 0 16px 16px;
        font-size: 0;
        display: inline-block;
        background: #FFFFFF;
        border-radius: 2px;
        margin-right: 10px;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear;
        overflow: hidden;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      &:nth-child(5n){
        margin-right: 0;
      }
      .stock-num{
        display:inline-block;
        padding: 0 10px;
        line-height: 2;
        font-size: 14px;
        background: #413d3d;
        color: #ffffff;
      }
      .preview-img{
        height: 200px;
        width: 200px;
        margin: 0 auto 12px;
        .img{
          width: 100%;
          height: 100%;
          vertical-align: middle
        }
      }
      .pro-name{
        color: #5c5c5c;
        font-size: 16px;
        margin-bottom: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .pro-type{
        color: #a3a3a3;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .price-box{
        margin-top: 16px;
        border-top: 1px solid rgba(220,220,220, .2);
        padding-top: 16px;
      }
      .price{
        margin-bottom: 16px;
        font-size: 0;
      }
      .old{
        color: #bdbdbd;
        font-size: 12px;
        text-decoration: line-through;
      }
      .now{
        display: inline-block;
        font-size: 16px;
        padding-right:3px;
        color: #ff0f34;
        // font-weight: 550;
      }
      .left{
        float: right;
        color: #5c5c5c;
        font-size: 14px;
        margin-top: 2px;
      }
      .btn-buy{
        display:block;
        width: 100%;
        height:40px;
        text-align: center;
        color: #ffffff;
        background: #ff0f34;
        border-radius: 2px;
        font-size: 16px;
        line-height: 40px;
        &:hover{
          opacity: .8;
        }
      }
      .cannot-buy{
        display:block;
        width: 100%;
        height:40px;
        text-align: center;
        color: #ffffff;
        background: #dfdfdf;
        border-radius: 2px;
        font-size: 16px;
        line-height: 40px;
      }
      .sell-out{
        position:absolute;
        left:0;
        top:0;
        bottom: 0;
        right: 0;
        background: rgba(223,223,223,.2);
        z-index: 88;
        .sell-out-img{
          width: 50%;
          left: 50%;
          transform: translateX(-50%);
          position: absolute;
          top: 58px;
        }
      }
    }
    .activity-item__small{
      width: 220px;
      border: 1px solid #ececec;
      &:nth-child(4n) {
         margin-right: 0;
      }
      &:nth-child(5n){
        margin-right: 10px;
      }
    }
    .discount-card-tejia{
      position: absolute;
      display: inline-block;
      font-size: 14px;
      width: 90px;
      height: 20px;
      line-height: 20px;
      color: #ffffff;
      background-color: rgba(255, 15, 52, 0.8);
      text-align: center;
      transform: rotate(-35deg);
      left: -25px;
      top: 6px;
      .word{
        font-size: 12px;
        padding-left: 2px;
      }
    }
</style>
